<template>
  <v-overlay v-model="visible">
    <div class="battle-rule">
      <div class="battle-rule-title">
        对战规则
        <img
          src="@/static/img/battle/icon-close.png"
          class="cursor-pointer"
          @click="visible = false"
          alt=""
        />
      </div>

      <div class="battle-rule-content">
        <p v-for="text in texts">{{ text }}</p>
      </div>
    </div>
  </v-overlay>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const visible = ref(false);
   






    return {
      visible,
      texts: [
        "活动规则：",
        " 1.创建活动时，可以选择活动人数（2人、3人、4人模式），一场乱斗最多可以选择8个盲盒。房间一但创建不可取消。",
        "2.获胜判定：",
        " （1）天命模式：开出饰品总价值高者获胜",
        " （2）逆运模式：开出饰品总价值低者获胜",
        "3.当3人、4人对战模式出现2位以上获得饰品价值相同的获胜者时，随机一位胜者赢走所有奖励，当2人对战出现获得饰品价值相同时，2人获得对应饰品到背包。",
        "4.房间开启30分钟后无人加入，会自动取消。",
        "5.每场活动的结果受到（创建时间，用户ID，用户位置和开始时间等）多方面因素影响，为完全随机产生的结果。"
      ],
      open: () => {
        visible.value = true;
      }
    };
  },
});
</script>

<style lang="scss" scoped>
.battle-rule {
  width: 80vw;
  min-width: 600px;
  max-width: 1200px;
  color: #fff;
  background: #1c192a;

  .battle-rule-title {
    font-size: 24px;
    line-height: 64px;
    background: #28253b;
    text-indent: 32px;
    color: rgba(255, 255, 255, 0.56);
    position: relative;

    img {
      width: 19px;
      height: 19px;
      position: absolute;
      top: 50%;
      right: 32px;
      transform: translateY(-50%);
    }
  }

  .battle-rule-content {
    padding: 20px;
    font-size: 15px;
    line-height: 20px;

    p {
      margin-top: 10px;

      &:first-child {
        margin-top: 0;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 600px) {
  .battle-rule {
    width: 100vw;
    min-width: 100vw;
  }
}
</style>
